<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="800px"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
     
      label-width="100px"
    >
      <el-form-item label="班次名称：">
        <el-input v-model="dataForm.name" placeholder="班次名称"></el-input>
      </el-form-item>
      <el-form-item label="上下班次数：" prop="remark">
        <el-radio-group v-model="dataForm.workTime">
          <el-radio-button label="1">1天1次上下班</el-radio-button>
          <el-radio-button label="2">1天2次上下班</el-radio-button>
          <el-radio-button label="3">1天3次上下班</el-radio-button>
        </el-radio-group>
        <el-checkbox v-model="timeFlag" style="margin-left:30px">打卡时段设置</el-checkbox>
      </el-form-item>

      <el-form-item label="第一次：" prop="remark">
        <div style="display:flex">
          <div style="display:flex;flex:1;flex-wrap:wrap;max-width: 320px;">
            <div style="display:flex;flex:1;margin-bottom: 10px;">
              <div style="padding:0 10px">上班</div>
              <el-time-picker
                v-model="dataForm.firstWorkOn"
                style="width:110px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
            </div>
            <div style="display:flex;flex:1;margin-bottom: 10px;">
              <div style="padding:0 10px">下班</div>
              <el-time-picker
                v-model="dataForm.firstWorkOff"
                style="width:110px;"
                value-format="HH:mm"
                format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
            </div>
          </div>
          <div style="flex:2" v-if="timeFlag">
            <div style="display:flex;;margin-bottom: 10px;align-items:center">
              <el-time-picker
                v-model="dataForm.firstWorkStart"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <span style="padding:0 10px">至</span>
              <el-time-picker
                v-model="dataForm.firstWorkEnd"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <div style="padding:0 10px">可以上班打卡</div>
            </div>
            <div style="display:flex;margin-bottom: 10px;align-items:center">
              <el-time-picker
                v-model="dataForm.firstWorkStart1"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <span style="padding: 0 10px">至</span>
              <el-time-picker
                v-model="dataForm.firstWorkEnd1"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <div style="padding:0 10px">可以下班打卡</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="第一次：" v-if="dataForm.workTime>1">
        <div style="display:flex">
          <div style="display:flex;flex:1;flex-wrap:wrap;max-width: 320px;">
            <div style="display:flex;flex:1;margin-bottom: 10px;">
              <div style="padding:0 10px">上班</div>
              <el-time-picker
                v-model="dataForm.secondWorkOn"
                style="width:110px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
            </div>
            <div style="display:flex;flex:1;margin-bottom: 10px;">
              <div style="padding:0 10px">下班</div>
              <el-time-picker
                v-model="dataForm.secondWorkOff"
                style="width:110px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
            </div>
          </div>
          <div style="flex:2" v-if="timeFlag">
            <div style="display:flex;;margin-bottom: 10px;align-items:center">
              <el-time-picker
                v-model="dataForm.secondWorkStart"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <span style="padding:0 10px">至</span>
              <el-time-picker
                v-model="dataForm.secondWorkEnd"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <div style="padding:0 10px">可以上班打卡</div>
            </div>
            <div style="display:flex;margin-bottom: 10px;align-items:center">
              <el-time-picker
                v-model="dataForm.secondWorkStart1"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <span style="padding: 0 10px">至</span>
              <el-time-picker
                v-model="dataForm.secondWorkEnd1"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <div style="padding:0 10px">可以下班打卡</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="第一次：" v-if="dataForm.workTime>2">
        <div style="display:flex">
          <div style="display:flex;flex:1;flex-wrap:wrap;max-width: 320px;">
            <div style="display:flex;flex:1;margin-bottom: 10px;">
              <div style="padding:0 10px">上班</div>
              <el-time-picker
                v-model="dataForm.thirdWorkOn"
                style="width:110px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
            </div>
            <div style="display:flex;flex:1;margin-bottom: 10px;">
              <div style="padding:0 10px">下班</div>
              <el-time-picker
                v-model="dataForm.thirdWorkOff"
                style="width:110px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
            </div>
          </div>
          <div style="flex:2" v-if="timeFlag">
            <div style="display:flex;;margin-bottom: 10px;align-items:center">
              <el-time-picker
                v-model="dataForm.thirdWorkStart"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <span style="padding:0 10px">至</span>
              <el-time-picker
                v-model="dataForm.thirdWorkEnd"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <div style="padding:0 10px">可以上班打卡</div>
            </div>
            <div style="display:flex;margin-bottom: 10px;align-items:center">
              <el-time-picker
                v-model="dataForm.thirdWorkStart1"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <span style="padding: 0 10px">至</span>
              <el-time-picker
                v-model="dataForm.thirdWorkEnd1"
                style="width:120px;"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="请选择"
              ></el-time-picker>
              <div style="padding:0 10px">可以下班打卡</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <div style="display:flex;align-items:center;padding-bottom:10px">
        <el-checkbox v-model="restFlag" style="margin-right:10px">休息时间</el-checkbox>
        <div style="display:flex;align-items:center" v-if="restFlag">
          <div style="padding:0 10px;">休息开始</div>
          <el-time-picker
            v-model="dataForm.restStart"
            style="width:110px;"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="请选择"
          ></el-time-picker>
          <div style="padding:0 10px;">休息结束</div>
          <el-time-picker
            v-model="dataForm.restEnd"
            style="width:110px;"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="请选择"
          ></el-time-picker>
        </div>
      </div>

      <el-checkbox v-model="signFlag">下班不用打卡（开启后，下班不打卡也不会记作异常）</el-checkbox>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from "@/utils";
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: "",
        workTime: "1", //打卡次数
        firstWorkOn: "", //第一次上班时间
        firstWorkOff: "", //第一次下班时间
        firstWorkStart: "", //第一次上班打卡开始时间
        firstWorkEnd: "", //第一次上班打卡结束时间
        firstWorkStart1: "", //第一次下班打卡开始时间
        firstWorkEnd1: "", //第一次下班打卡结束时间
        secondWorkOn: "", //第二次上班时间
        secondWorkOff: "", //第二次下班时间
        secondWorkStart: "", //第二次上班打卡开始时间
        secondWorkEnd: "", //第二次上班打卡结束时间
        secondWorkStart1: "", //第二次下班打卡开始时间
        secondWorkEnd1: "", //第二次下班打卡结束时间
        thirdWorkOn: "", //第三次上班时间
        thirdWorkOff: "", //第三次下班时间
        thirdWorkStart: "", //第三次上班打卡开始时间
        thirdWorkEnd: "", //第三次上班打卡结束时间
        thirdWorkStart1: "", //第三次下班打卡开始时间
        thirdWorkEnd1: "" //第三次下班打卡结束时间
      },
      checked: false,

      radio1: "1",
      menuList: [],
      menuListTreeProps: {
        label: "name",
        children: "children"
      },
      dataRule: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ]
      },

      timeFlag: false, //打卡时段设置0：未设置,1：设置
      restFlag: false, //休息时间：0：未设置，1：设置
      signFlag: false,

      restStart: "", //休息开始时间
      restEnd: "", //休息结束时间
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    };
  },
  methods: {
    init(id) {
      this.dataForm = {
        workTime: "1", //打卡次数
        firstWorkOn: "", //第一次上班时间
        firstWorkOff: "", //第一次下班时间
        firstWorkStart: "", //第一次上班打卡开始时间
        firstWorkEnd: "", //第一次上班打卡结束时间
        firstWorkStart1: "", //第一次下班打卡开始时间
        firstWorkEnd1: "", //第一次下班打卡结束时间
        secondWorkOn: "", //第二次上班时间
        secondWorkOff: "", //第二次下班时间
        secondWorkStart: "", //第二次上班打卡开始时间
        secondWorkEnd: "", //第二次上班打卡结束时间
        secondWorkStart1: "", //第二次下班打卡开始时间
        secondWorkEnd1: "", //第二次下班打卡结束时间
        thirdWorkOn: "", //第三次上班时间
        thirdWorkOff: "", //第三次下班时间
        thirdWorkStart: "", //第三次上班打卡开始时间
        thirdWorkEnd: "", //第三次上班打卡结束时间
        thirdWorkStart1: "", //第三次下班打卡开始时间
        thirdWorkEnd1: "" //第三次下班打卡结束时间
      };
      this.dataForm.id = id || ""; 
      if (id) {
        this.$http({
          url: this.$http.adornUrl(`/sys/workAttendance/detailWorkClass`),
          method: "post",
          data: this.$http.adornData({
            id: id
          })
        }).then(({ data }) => {
          // console.log(data);
          if (data.code == 0) {
            this.dataForm = Object.assign({}, this.dataForm, data.wc);
            this.timeFlag = this.dataForm.timeFlag == "1" ? true : false;
            this.restFlag = this.dataForm.restFlag == "1" ? true : false;
            this.signFlag = this.dataForm.signFlag == "1" ? true : false;
          }
        });
      }
      this.visible = true;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/sys/workAttendance/saveOrUpdateWorkClass`
            ),
            method: "post",
            data: this.$http.adornData({
              data: JSON.stringify(
                Object.assign(this.dataForm, {
                  timeFlag: this.timeFlag ? 1 : 0,
                  restFlag: this.restFlag ? 1 : 0,
                  signFlag: this.signFlag ? 1 : 0
                })
              )
            })
          }).then(({ data }) => {
            if (data && data.code == 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
